<div class="am-cf am-padding-left-xs">
	<strong class="am-text-primary am-text-default">zuul动态路由配置管理</strong> / <small>路由配置管理</small>
</div>
<hr class="am-margin-0" />
<form class="am-form am-form-horizontal am-margin-xs" role="form" method="post" action="" id="conditionForm">
	<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-4 am-thumbnails">
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm">
				<label for="likeId" class="am-u-sm-4 am-form-label">id</label>
				<div class="am-u-sm-8">
					<input type="text" class="am-form-field" name="likeId" />
				</div>
			</div>
		</li>
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm">
				<label for="likeRouterName" class="am-u-sm-4 am-form-label">名称</label>
				<div class="am-u-sm-8">
					<input type="text" class="am-form-field" name="likeRouterName" />
				</div>
			</div>
		</li>
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm">
				<label for="name" class="am-u-sm-4 am-form-label">是否启用</label>
				<div class="am-u-sm-8">
					<select class="am-input-sm" name="enable">
						<option value="true">启用</option>
						<option value="false">禁用</option>
					</select>
				</div>
			</div>
		</li>
	</ul>
	<div class="am-text-right">
		<button type="button" class="am-btn am-btn-primary am-btn-xs am-margin-right-xs" id="queryBtn">查询</button>
		<button type="reset" class="am-btn am-btn-default am-btn-xs">重置</button>
	</div>
</form>
<div class="am-panel am-panel-default am-border-top-0">
	<div class="am-panel-hd am-padding-0">
		<div class="am-btn-group am-margin-left-xs">
			<button type="button" class="am-btn am-btn-primary am-btn-xs" id="toAddBtn">新增</button>
			<button type="button" class="am-btn am-btn-primary am-btn-xs" id="toChangeStoreType">切换数据源</button>
			<button type="button" class="am-btn am-btn-danger am-btn-xs" id="clearBtn">清空</button>
		</div>
		<span id="currStore"></span>
	</div>
	<div class="am-panel-bd am-padding-xs am-padding-bottom-0 am-scrollable-horizontal">
		<table class="am-table am-table-bordered am-table-compact am-table-striped am-table-hover am-text-nowrap">
			<thead>
			    <tr>
			    	<th><input type="checkbox"/></th>
			    	<th>操作</th>
			        <th>id</th>
			        <th>名称</th>
			        <th>enable</th>
			        <th>path</th>
			        <th>serviceId</th>
			        <th>url</th>
			        <th>stripPrefix</th>
			        <th>retryable</th>
			        <th>sensitiveHeaders</th>
			        <th>customSensitiveHeaders</th>
			    </tr>
			</thead>
			<tbody id="dataList"></tbody>
		</table>
	</div>
</div>

<div id="editDialog" style="display: none;">
	<form class="am-form am-form-horizontal am-margin-xs" role="form" method="post" action="" id="editForm">
		<div class="am-panel am-panel-default">
			<div class="am-panel-hd">基本信息<small class="am-margin-left-xs am-text-grey">serviceId和url选填其一</small></div>
			<div class="am-panel-bd am-padding-xs am-padding-bottom-0">
				<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-2 am-thumbnails">
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="id" class="am-u-sm-4 am-form-label"><i class="am-text-danger">*&nbsp;</i>ID</label>
							<div class="am-u-sm-8">
								<input type="text" class="am-form-field" name="id" />
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="path" class="am-u-sm-4 am-form-label"><i class="am-text-danger">*&nbsp;</i>path</label>
							<div class="am-u-sm-8">
								<input type="text" class="am-form-field" name="path" />
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="serviceId" class="am-u-sm-4 am-form-label">serviceId</label>
							<div class="am-u-sm-8">
								<input type="text" class="am-form-field" name="serviceId" />
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="url" class="am-u-sm-4 am-form-label">url</label>
							<div class="am-u-sm-8">
								<input type="text" class="am-form-field" name="url" />
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="enable" class="am-u-sm-4 am-form-label">enable</label>
							<div class="am-u-sm-8">
								<label class="am-radio-inline">
									<input type="radio" name="enable" value="true" checked="checked"> true
								</label>
								<label class="am-radio-inline">
									<input type="radio" name="enable" value="false"> false
								</label>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="am-panel am-panel-default am-border-top-0">
			<div class="am-panel-hd">辅助信息<small class="am-margin-left-xs am-text-grey"></small></div>
			<div class="am-panel-bd am-padding-xs am-padding-bottom-0">
				<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-2 am-thumbnails">
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="routerName" class="am-u-sm-4 am-form-label">名称</label>
							<div class="am-u-sm-8">
								<input type="text" class="am-form-field" name="routerName" />
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="sensitiveHeaders" class="am-u-sm-4 am-form-label">sensitiveHeaders</label>
							<div class="am-u-sm-8">
								<input type="text" class="am-form-field" name="sensitiveHeaders" />
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="stripPrefix" class="am-u-sm-4 am-form-label">stripPrefix</label>
							<div class="am-u-sm-8">
								<label class="am-radio-inline">
									<input type="radio" name="stripPrefix" value="true" checked="checked"> true
								</label>
								<label class="am-radio-inline">
									<input type="radio" name="stripPrefix" value="false"> false
								</label>
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="retryable" class="am-u-sm-4 am-form-label">retryable</label>
							<div class="am-u-sm-8">
								<label class="am-radio-inline">
									<input type="radio" name="retryable" value="true"> true
								</label>
								<label class="am-radio-inline">
									<input type="radio" name="retryable" value="false" checked="checked"> false
								</label>
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="customSensitiveHeaders" class="am-u-sm-4 am-form-label">customSensitiveHeaders</label>
							<div class="am-u-sm-8">
								<label class="am-radio-inline">
									<input type="radio" name="customSensitiveHeaders" value="true"> true
								</label>
								<label class="am-radio-inline">
									<input type="radio" name="customSensitiveHeaders" value="false" checked="checked"> false
								</label>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</form>
</div>
<div id="editStoreTypeDialog" style="display: none;">
	<div class="am-margin-left-xs">
		<h5 class="am-margin-bottom-xs">存储空间说明：</h5>
		<div class="am-margin-left-sm">
			数据库-->表名<br/>Redis-->namespace<br/>Zookeeper-->namespace
		</div>
	</div>
	<form class="am-form am-form-horizontal am-margin-xs" role="form" method="post" action="" id="editStoreTypeForm">
		<div class="am-panel am-panel-default">
			<div class="am-panel-hd">基本信息</div>
			<div class="am-panel-bd am-padding-xs am-padding-bottom-0">
				<ul class="am-avg-sm-1 am-avg-md-1 am-avg-lg-1 am-thumbnails">
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="storeType" class="am-u-sm-4 am-form-label">存储类型</label>
							<div class="am-u-sm-8">
								<select class="am-input-sm" id="storeType">
									<option value="db" selected="selected">数据库</option>
									<option value="redis">Redis</option>
									<option value="zk">Zookeeper</option>
								</select>
							</div>
						</div>
					</li>
					<li class="am-padding-0">
						<div class="am-form-group am-form-group-sm">
							<label for="storeNamespace" class="am-u-sm-4 am-form-label"><i class="am-text-danger">*&nbsp;</i>存储空间</label>
							<div class="am-u-sm-8">
								<input type="text" class="am-form-field" id="storeNamespace" value="zuul_route_config" />
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</form>
</div>
<script id="listTmpl" type="text/html">
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<tr>
	<td class="">
		<input type="checkbox" value="{{ d.list[i].id }}"/>
	</td>
	<td class="am-padding-0">
		<button type="button" class="am-btn am-btn-primary am-btn-xs toUpdate" data-id="{{ d.list[i].id }}">修改<span class="am-hide json">{{ d.list[i].json }}</span></button>
		<button type="button" class="am-btn am-btn-primary am-btn-xs toDelete" data-id="{{ d.list[i].id }}">删除</button>
		{{# if(d.list[i].enable){ }}
		<button type="button" class="am-btn am-btn-primary am-btn-xs toDisable" data-id="{{ d.list[i].id }}">禁用</button>
		{{# } else { }}
		<button type="button" class="am-btn am-btn-primary am-btn-xs toEnable" data-id="{{ d.list[i].id }}">启用</button>
		{{# } }}
	</td>
	<td class="">{{ d.list[i].id }}</td>
	<td class="">{{ d.list[i].routerName }}</td>
	<td class="">{{ d.list[i].enable }}</td>
	<td class="">{{ d.list[i].path }}</td>
	<td class="">{{ d.list[i].serviceId }}</td>
	<td class="">{{ d.list[i].url }}</td>
	<td class="">{{ d.list[i].stripPrefix }}</td>
	<td class="">{{ d.list[i].retryable }}</td>
	<td class="">{{ d.list[i].sensitiveHeaders }}</td>
	<td class="">{{ d.list[i].customSensitiveHeaders }}</td>
</tr>
{{# } }}
</script>
<script>
(function(){
	var storeType = $.store('zuul_store_type');
	if(!storeType){
		storeType = 'db';
	}
	
	$(function(){
		$('#currStore').text('当前数据源:' + storeType);
		query();
	});
	
	$('#queryBtn').on('click', function(){
		query();
	});
	
	function query(page, size){
		$('#conditionForm').ajaxSubmit({
			url: '/route/' + storeType + '/list',
			type: 'get',
			dataType: 'json',
			success: function(data){
				if(!data.list || data.list.length < 1){
					$('#dataList').html('<tr><td class="am-text-center" colspan="12">没有查询到符合条件的数据</td></tr>');
					return false;
				}
				for(var i=0; i<data.list.length; i++){
					data.list[i].json = JSON.stringify(data.list[i]);
				}
				$('#dataList').tmpl($('#listTmpl').html(), data);
			}
		});
	}
	
	$('#dataList').on('click', '.toEnable', function(){
		var id = $(this).data('id');
		layer.confirm('确定要启用(' + storeType + ')：' + id + '？', function(index){
		    layer.close(index);
		    
		    $.ajax({
				url: '/route/' + storeType + '/enable',
				type: 'put',
				dataType: 'json',
				data: {
					id: id,
					enable: true
				},
				success: function(data){
					query();
				}
			});
		});
	});
	
	$('#dataList').on('click', '.toDisable', function(){
		var id = $(this).data('id');
		layer.confirm('确定要禁用(' + storeType + ')：' + id + '？', function(index){
		    layer.close(index);
		    
		    $.ajax({
				url: '/route/' + storeType + '/enable',
				type: 'put',
				dataType: 'json',
				data: {
					id: id,
					enable: false
				},
				success: function(data){
					query();
				}
			});
		});
	});
	
	$('#dataList').on('click', '.toDelete', function(){
		var id = $(this).data('id');
		layer.confirm('确定要删除(' + storeType + ')：' + id + '？', function(index){
		    layer.close(index);
		    
		    $.ajax({
				url: '/route/' + storeType + '/' + id,
				type: 'delete',
				dataType: 'json',
				success: function(data){
					query();
				}
			});
		});
	});
	
	$('#dataList').on('click', '.toUpdate', function(){
		var obj = $(this).find('.json').text();
		obj = JSON.parse(obj);
		$('#editForm').find('input[type="text"], select').each(function(){
			$(this).val(obj[$(this).attr('name')]);
		});
		$('#editForm').find('input[type="radio"]').each(function(){
			$(this).filter('[value=' + obj[$(this).attr('name')] + ']').prop('checked', true);
		});
		openEditForm();
	});
	
	function openEditForm(){
		layer.open({
			type: 1,
			title: '编辑路由配置(' + storeType + ')',
			area: '70%',
			btn: ['保存', '取消'],
			content: $('#editDialog'),
			yes: function(index, layero){
				$('#editForm').ajaxSubmit({
 					url:'/route/' + storeType + '/save',
 					type:'put',
 					dataType: 'json',
 					success: function(data){
 						layer.closeAll();
 						query();
 					}
				});
			}
		});
	}
	
	$('#toAddBtn').on('click', function(){
		$('#editForm')[0].reset();
		openEditForm();
	});
	
	$('#toChangeStoreType').on('click', function(){
		layer.open({
			type: 1,
			title: '切换存储类型配置(' + storeType + ')',
			area: '30%',
			btn: ['保存', '取消'],
			content: $('#editStoreTypeDialog'),
			yes: function(index, layero){
				var temp = $('#storeType').val();
				$.ajax({
 					url:'/route/' + temp + '/change',
 					type:'put',
 					data: {
 						value: $('#storeNamespace').val()
 					},
 					dataType: 'json',
 					success: function(data){
 						storeType = temp;
 						$.store('zuul_store_type', storeType);
 						$('#currStore').text('当前数据源:' + storeType);
 						layer.closeAll();
 						query();
 					}
				});
			}
		});
	});
	
	var store = {
			db: 'zuul_route_config',
			redis: 'zuul_route_config',
			zk: 'zuul_route_config'
	}
	
	$('#storeType').on('change', function(){
		var type = $(this).val();
		$('#storeNamespace').val(store[type]);
	});
	
	$('#clearBtn').on('click', function(){
		layer.confirm('确定要清空' + storeType + '的所有路由配置吗？', function(index){
		    layer.close(index);
		    
		    $.ajax({
				url: '/route/' + storeType + '/clear',
				type: 'put',
				dataType: 'json',
				success: function(data){
					query();
				}
			});
		});
	});
})();
</script>
</body>
</html>
